<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#F1F1F1" :fullscreen="true">
		<cl-sticky>
			<cl-topbar
				:border="false"
				background-color="#0C81F7"
				color="#fff"
				:title="t('invoice.title')"
				:moreTit="t('invoice.add')"
				@more="tapMore"
			/>
		</cl-sticky>
		<view class="page-invoice animate__animated animate__fadeIn">
			<view class="list">
				<cl-list-item label="" swipe="right" v-for="(item, index) in 5" :key="index">
					<view class="li" @click="router.push('/pages/invoice/detail?id=1')">
						<view class="name overflow1"> {{ $t("invoice.companyName") }}</view>
						<view class="flex flex-between align-center">
							<view class="text"> {{ $t("invoice.duty") }}：91110108569454891U</view>
							<view class="default">{{ $t("invoice.default") }}</view>
						</view>
					</view>
					<template #menu>
						<view class="flex flex-column flex-center btns">
							<view class="defaultbtn flex flex-center">
								<cl-icon name="stop" class="mr20" :size="36"></cl-icon>
								{{ $t("invoice.default") }}
							</view>
							<view class="delbtn flex flex-center">
								<cl-icon name="delete" class="mr20" :size="36"></cl-icon>
								{{ $t("invoice.del") }}
							</view>
						</view>
					</template>
				</cl-list-item>
				<cl-loadmore
					background-color="#f1f1f1"
					:loading="false"
					:finish="true"
					:text="$t('loadmore.text')"
					:loading-text="$t('loadmore.loadingText')"
					:finish-text="$t('loadmore.finishText')"
				></cl-loadmore>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user } = useStore();
const ui = useUi();
const app = useApp();

const tapMore = () => {
	router.push("/pages/invoice/add");
};
</script>

<style lang="scss" scoped>
.page-invoice {
	padding: 30rpx 0;
	.list {
		:deep(.cl-list-item) {
			background-color: transparent;
		}
		:deep(.cl-list-item__container) {
			padding: 0 20rpx;
		}
		:deep(.cl-list-item__content) {
			padding: 0;
		}
		:deep(.cl-list-item__append) {
			display: none;
		}
		.li {
			width: 710rpx;
			// background: #ffffff;
			// box-shadow: 0px 10px 20rpx 0px rgba(170, 170, 170, 0.1);
			// border-radius: 20rpx 20rpx 0px 0px;
			padding: 40rpx;
			box-sizing: border-box;
			margin-bottom: 6rpx;
			background-image: url("/static/images/border.png");
			background-size: 100% 100%;
			.name {
				width: 100%;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 38rpx;
				color: #333333;
				border-bottom: 2rpx dashed #ddd;
				padding-bottom: 20rpx;
			}
			.text {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #666666;
				padding: 30rpx 0;
			}
			.default {
				// width: 80rpx;
				padding: 0 16rpx;
				height: 44rpx;
				background: #0c81f7;
				border-radius: 10rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				line-height: 44rpx;
				text-align: center;
			}
		}
		.btns {
			height: calc(100% - 30rpx);
			padding-right: 30rpx;
		}
		.defaultbtn {
			width: 180rpx;
			height: 80rpx;
			background: #0c81f7;
			border-radius: 40rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
		}
		.delbtn {
			width: 180rpx;
			height: 80rpx;
			background: #ff0000;
			border-radius: 40rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			margin-top: 30rpx;
		}
	}
}
</style>
